<template>
  <el-dialog
    title="消息"
    :visible.sync="dialogVisible"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    :destroy-on-close="true"
    :modal-append-to-body="false"
  >
    <div style="display: flex; justify-content: center; padding: 38px">
      <div>
        <div style="display: flex; align-items: center">
          <img style="width: 80px; height: 80px" src="@/assets/shop/shop_info.png" />
          <div style="margin-left: 20px">
            <div class="dialog-title">{{ days <= 0 ? '商城到期提醒' : '续费提醒' }}</div>
            <div v-if="days <= 0" class="dialog-text">您的小程序商城已过期，功能不可用</div>
            <div v-else class="dialog-text">您的小程序商城将于<span style="color: #FD6C21">{{ days }}天</span>后到期，</div>
            <div class="dialog-text">{{ days <= 0 ? '点击续费后，可继续使用' : '请尽快续费' }}</div>
          </div>
        </div>
        <div style="display: flex; justify-content: center; margin-top: 18px">
          <el-button type="primary" style="border-radius: 5px; background: #1890ff; width: 106px;" @click="onToShop">续费</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'DialogConfigSuccess',
  data() {
    return {
      dialogVisible: false,
      days: 0,
    }
  },
  methods: {
    // 查看商城
    onToShop() {
      this.$router.push({ path: '/shopManage/buyShop' })
      this.dialogVisible = false
    },
    // 关门
    onClose() {
      this.dialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  line-height: 24px;
  margin-bottom: 6px;
}
.dialog-text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 24px;
}
</style>